<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div id="root"></div>
    <script>
      let ul = document.getElementById("root");
      // 插入十万条数据
      let total = 100000;
      // 一次插入 20 条
      let once = 20;
      //总页数
      let page = total / once;
      //每条记录的索引
      let index = 0;
      //循环加载数据
      function loop(curTotal, curIndex) {
        if (curTotal <= 0) {
          return false;
        }
        //每页多少条
        let pageCount = Math.min(curTotal, once);
        window.requestAnimationFrame(function () {
          let frament = document.createDocumentFragment()
          for (let i = 0; i < pageCount; i++) {
            let li = document.createElement("li");
            li.innerText = curIndex + i + " : " + ~~(Math.random() * total);
            frament.appendChild(li);
          }
          ul.appendChild(frament)
          loop(curTotal - pageCount, curIndex + pageCount);
        });
      }
      loop(total, index);
    </script>
  </body>
</html>
